import { LeftOutline } from 'antd-mobile-icons';
import { Form, Input, Toast, NavBar,Dialog } from 'antd-mobile';
import React, { Component } from 'react';
import '../styles/Register.scss'
import {user_sendcode,user_checkcode} from "../api/index";

class Register2 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      active: false
    }
  }
  // 点击发送验证码
  async send() {
    var res = await user_sendcode({ tel: this.props.location.state.phone })
    if (res.data.code == 200) {
      Toast.show({
        content: '验证码已发送',
        position: 'bottom',
      })
      Dialog.alert({
        content:'验证码：' + res.data.data,
        closeOnMaskClick: true,
      })
    }
    console.log(res.data);
  }
  // 点击下一步
  async next() {
    var reg = /^\d{5}$/
    var res = reg.test(this.refs.fromRef.getFieldValue().code)
    if (res) {
      var res2 = await user_checkcode({ tel: this.props.location.state.phone, telcode: this.refs.fromRef.getFieldValue().code })
      console.log(res2.data);
      if (res2.data.code == 200) {
        // 继续注册
        this.props.history.push({ pathname: '/register3', state: { phone: this.props.location.state.phone } })
      }
      else {
        Toast.show({
          icon: 'fail',
          content: '验证码错误',
        })
      }
    }
  }
  // 输入的数据
  kk(changedValues) {
    // console.log(changedValues);
    var reg = /^\d{5}$/
    var res = reg.test(changedValues.code)
    if (res) {
      this.setState({ active: true })
    }
    else {
      this.setState({ active: false })
    }
  }
  // 返回
  back() {
    this.props.history.go(-1)
  }
  render() {
    return (
      <div className='register'>
        <NavBar className='header' onBack={() => { this.back() }}>注册</NavBar>
        <div className="register_main">
          <p className='register_code'>我们将以短信形式将验证码发送给您</p>
          <Form layout='horizontal' ref='fromRef' onValuesChange={(changedValues, allValues) => { this.kk(changedValues) }}>
            <Form.Item style={{ paddingLeft: 0 }} name='code' extra={<a onClick={() => { this.send() }}>发送验证码</a>}>
              <Input placeholder='请输入短信验证码' clearable />
            </Form.Item>
          </Form>
        </div>
        <div className="register_bottom">
          <div className={'register_next ' + (this.state.active ? 'liang' : '')} onClick={() => { this.next() }}>下一步</div>
        </div>
      </div>
    );
  }
}

export default Register2;